<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getCodeFn, checkCodeFn } from '@/api/login';
import { showFailToast, showToast } from 'vant';
import { useUserStore } from '@/stores/user';

const tel = ref('')
const code = ref('')
const router = useRouter()
const codeButtonText = ref('获取验证码')

const user = useUserStore()
const alltime = ref(60)
const isgetCode = ref(false)
function getCode() {
    getCodeFn().then(res => {
        console.log(res.data.code);
        showToast(res.data.code)
        isgetCode.value = true
        const time = setInterval(() => {
            if (alltime <= 0) {
                alltime.value = 60
                codeButtonText.value = '重新获取'
                isgetCode.value = false
                clearInterval(time)
            }
            alltime.value--
            codeButtonText.value = alltime.value + 's后重新获取'
        }, 1000)
    })
}

function tonext() {
    if (!user.isTelinList(tel.value)) {
        checkCodeFn({
            code: code.value
        }).then(res => {
            if (res.data.flag) {
                router.push({
                    path: '/forget/forgetstep2',
                    query: {
                        tel: tel.value
                    }
                })
                showToast(res.message)
            }
            else {
                showFailToast(res.message)
                code.value == ''
            }
        })
    } else {
        showFailToast('手机号不存在')
    }

}

</script>
<template>
    <div class="step">
        <span class="active">1.手机号码验证</span>
        <span>2.设置新密码</span>
    </div>
    <van-cell-group class="box">
        <van-field v-model="tel" placeholder="手机号码" />
        <div class="codelogin">
            <van-field v-model="code" placeholder="短信验证码">
            </van-field>
            <van-button class="code" @click="getCode" :disabled="isgetCode">{{ codeButtonText }}</van-button>
        </div>
    </van-cell-group>
    <div class="button">
        <van-button block round type="primary" @click="tonext">下一步</van-button>
    </div>
</template>

<style lang="scss" scoped>
.step {
    display: flex;
    justify-content: space-between;
    background-color: white;

    span {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .active {
        color: #3a8cff;
    }

}

.box {
    margin-top: 10px;

    .codelogin {
        position: relative;

        .code {
            color: #3a8cff;
            margin: 0;
            padding: 0;
            border: none;
            position: absolute;
            right: 40px;
            top: 9px;
            line-height: 30px;
            height: 30px;
        }
    }
}

.button {
    width: 335px;
    margin: 0 auto;
    margin-top: 10px;
}
</style>